Apuntes varios sobre novedades de Blogger

Últimamente voy con el tiempo justo para todo incluido el blog, eso quiere decir que las últimas novedades y sorpresas de Blogger pasaron por aquí casi sin hacer ruido.

Por ese motivo hay ausencia de entradas sobre temas como los comentarios anidados y las nuevas opciones para configurar Blogger.

Es una ventaja por mucho que algunos se empeñen en decir lo contrario que todos los blogs se repitan sobre un mismo tema cuando hay novedades. Y lo es, porque no sólo es más fácil llegar a todos sino porque lo que no descubre uno lo descubre otro y siempre ven más una docena de ojos que dos.

Para los que aún no se enteraron y en mi caso para tener como archivo particular ahí van unos enlaces sobre las novedades de Blogger.

Nuevas opciones SEO en Blogger

Las opciones de las etiquetas META description

Nueva etiqueta META para descripción en plantillas modificadas

Página de error 404 de Vagabundia.

Página de error 404 de Ciudad Blogger.

Página de error 404 de Emilio Cobos

Página de error 404 de Oloman

Redirección de dominios

Comentarios anidados.
Comentarios anidados "personalización 1"
Comentarios anidados "personalización 2"

Y no olviden que Abril es el mes que Blogger hará oficial el cambio de la antigua interfaz a la nueva.

Si hay una palabra indicada esa sería "práctico" y si fueran dos, añadiría también lo de "funcional". Así es como definiría la nueva mejora de Blogger para las nuevas plantillas.

Se trata de la implementación del sistema de respuesta en los comentarios conocido por todos como Reply y que ahora, ya no se tiene que añadir manualmente como hicimos hace unos meses.

Así me lo hizo saber Jorge Angel y así lo he comprobado que la opción Reply se puede usar en "Responder" y eliminar el comentario con el enlace "Suprimir".

El sistema es muy cómodo cuando se trata de respuestas individuales.
Aunque no soy fans de las nuevas plantillas es bueno que tengas mejoras y que sigan así.

De todas las novedades de Blogger la última es la que peor he digerido y no es por capricho sino porque no termina de convencerme el cambio igual luego una se va acostumbrando como suele pasar con casi todo.

Con el cambio me refiero a ese cambio de perfil de Blogger a Google+ pero más concretamente
Cuando Google+ cordialmente nos invitó a algunos a no utilizar el nombre de autor en Blogger y nos sugirió usar el nombre propio, entonces no pensaba yo que tendría relación a la hora de cambiar de un perfil a otro.

No sé si estaba escrito en alguna parte y yo no lo leí o lo leí sin llegar a entenderlo, o ni lo uno ni lo otro sino que no lo explicaron en ninguna parte que con el tiempo cualquier usuario que quisiera publicar sus entradas en Google+ tendría que olvidarse de su nombre de autor de toda la vida.
Que quieren que les diga, una tiene su corazoncito y hay cosas de las que cuesta desprenderse.

Igual no me explico y simplemente pienso en voz alta pero lo cierto es que por enésima vez he cambiando el perfil y seguramente lo seguiré cambiando, mientras tanto ahí van los pasos a seguir por si le sirven a alguien.

A tener en cuenta

Desde el momento que se conecta el blog a Google+ el nombre que dimos en Google+ será el que sustituya nuestro añorado nombre en Blogger y cuando digo Blogger digo comentarios y perfil del blog y en el formulario de comentarios claro está.

Hacemos de tripas corazón pensando que si los de Blogger dicen que el cambio es bueno por algo será que ellos entienden un rato.

Conectar nuestro blog con Google+

Para compartir las entradas de Blogger en Google+ necesitamos tener un perfil público y luego ya podemos hacer el cambio.
Primero hay que "conectar el blog a Google+" podemos hacerlo desde el siguiente enlace o con unos sencillos pasos que veremos a continuación.

• Nos situamos en escritorio y hacemos click sobre el blog que vamos a conectar con Google+

• En la esquina superior derecha veremos nuestra imagen en Blogger con la flecha del desplegable que nos lleva al perfil y la configuración de la cuenta. Justo después en el icono de la rueda dentada veremos otro desplegable y ahí en "Conectar a Google+" hacemos click con fuerza y decisión.

Otra forma de conectar el blog a Google+ es desde Escritorio/Configuración:

Inmediatamente nos muestra el antes y después de nuestro perfil, es decir, que si en Blogger yo soy Gem@ en Google+ aparece mi nombre y apellido, o supuestamente el que uno diga que es su nombre. Un poco después nos informan del funcionamiento y da unas pautas:

"Cuando hagas el cambio al perfil de Google+, tendrás 30 días para restablecer tu perfil de Blogger si quieres. Una vez finalizado este plazo, se eliminarán los datos que incluya.
La información de tu perfil de Blogger no se transferirá a tu perfil de Google+. Por tanto, debes copiar la información de tu perfil de Blogger a tu perfil de Google+ antes de hacer el cambio."

"He leído la información indicada anteriormente y comprendo perfectamente que, a partir de este momento, mi perfil público de Google+ se asociará a todos mis blogs. Estoy listo para cambiar al perfil de Google+ en Blogger."+

• Si estamos conformes aceptamos marcando en la casilla correspondiente y aparecerá un botón naranja para cambiar.

• La página que nos muestra a continuación es para confirmar que somos nosotros, accedemos con nuestra cuenta y contraseña y nos mostrará un listado con todos los blogs que tengamos hasta ese momento.
  

• Marcaremos las casillas de los blogs que deseamos mostrar en nuestro perfil de Google+ y con eso termina el proceso de cambio.
  

Lo bueno que tiene es que podemos restablecer nuestro perfil de Blogger en cualquier momento pero todos los cambios que hagamos en nuestro perfil de Google+ no serán transferidos a Blogger.

Ver más información detallada.

Compartir las entradas en Google+

Cada vez que escribimos una entrada y le damos salida veremos que en la parte de abajo de esa entrada tenemos la opción de "Compartir" marcamos la casilla, hacemos click en Compartir y listo, nuestra entrada estará en muestro perfil de Google+.

Hay una entrada de Pizcos que trata como su título indica sobre un "Carrousel automático con las imágenes de las entradas de tu blog"

Los pasos a seguir son muy sencillos y el resultado es muy vistoso solo hay que ubicar cada código proporcionado en el sitio correspondiente y queda a gusto de cada uno personalizar las imágenes.

Por costumbre modifico la plantilla de arriba hacia abajo, así que lo primero que encuentro son los estilos y es lo que vamos a añadir justo antes de ]]></b:skin>

#carrousel ul{
margin:30px 10px;
padding:10px;
width:550px !important; /* ancho del carrousel */
height:100px !important; /* alto del carrousel */
overflow:hidden; /
}
#carrousel li{
margin:10px;
list-style:none;
position:relative;
float:left;
}
#carrousel img{
width: 80px !important; /* ancho de la imagen */
height: 80px !important;
border: 1px solid #ECA475; /* color del borde */
background: #BB2B17; /* color de fondo */
padding:5px; /* espacio entre la imagen y el borde */
cursor: pointer;
display: inline-block;
position: relative;
-moz-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-webkit-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-o-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
transition: opacity .3s linear;  /* efecto opacidad de la imagen */
}
#carrousel img:hover {
background-color: #0FF; /* color de fondo al pasar el cursor */
opacity: .5;
filter:alpha(opacity=50);
}

(Es importante que el ancho del carrousel no sea mayor que el espacio disponible en nuestro blog)
Si queremos prescindir del efecto producido por la opacidad omitimos los estilos marcados en color rojo. El resto de estilos que podemos modificar ya tiene indicado a que parte corresponde.

A continuación y si no estamos usando jQuery con anterioridad añadimos la librería justo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Justo después añadimos directamente a la plantilla el plugin y un pequeño script que podemos copiar desde el siguiente archivo de texto. De esa forma evitamos alojamientos externos y los consiguientes problemas que ocasionan.

Guardamos los cambios y nos dirigimos a Diseño para editar un nuevo gadget de HTML, en su interior añadimos el contenido de este archivo de texto.

Encontraremos al final de ese archivo AQUÍ-URL-DEL-BLOG es necesario sustituir esa parte por la url de nuestro blog.

Y eso es todo ver ejemplo en el footer de este blog

Cuando hablamos de perfil enseguida nos viene a la mente la imagen que nos representa en Blogger con un enlace que dice algo así como "Visita mi perfil" y eso si que es el perfil ese espacio que dice todo lo que nosotros permitimos que diga.

Pero, no tenemos por qué mostrar la imagen del perfil tal y como Blogger dispone en un gadget ni tiene por qué ser la misma imagen que mostramos en el avatar de comentarios, podemos hacer cualquier cosa y eso incluye mostrar una imagen con el texto que nosotros queremos mostrar y enlazarlo a cualquier sitio ya sea el perfil, escritorio o una breve descripción o incluso añadir ahí mismo los iconos a redes sociales.

Es algo así a lo que yo tengo añadido en el footer o lo que añadimos en su día para la información de autor en las entradas. De eso trata la consulta y ahí va una solución.

En plantilla y justo antes de ]]></b:skin> añadimos los estilos.

#deperfiles {
 color: #434040;
 font-family: Georgia,serif;
 font-size: 12px;
 line-height: 1.7;
 margin: 40px 30px 0;
 text-shadow: 0 1px 1px #ccc;
 text-align: justify;
}
#deperfiles img {
border: 3px solid #ffffff;
 border-radius: 2px 2px 2px 2px;
 box-shadow: 1px 1px 1px #333;
 border-radius: 100px 100px 100px 100px;
 float: left;
 margin: 0 25px 5px 0;
 width: 95px;
 opacity:0.9;
}
#deperfiles a:hover img {
opacity: 0.7;
}

Después editamos un nuevo gadget de HTML y en su interior añadimos lo siguiente:

<div id="deperfiles">
<a href="url-enlace"target="_blank">
<img alt='' src='url-imagen'height='95' width='95' /></a> 
<h2>Título</h2>
Texto o información
<div class="clear">
</div></div>

Tendremos algo así:

Ahora parece que si, que funciona como debe ser con la opción de escoger y funcionando debidamente como a todos nos gusta.

Es el LightBox de Blogger esa ventana modal que oscurece toda la pantalla cuando marcamos sobre alguna imagen, esa novedad que algunos recibieron con entusiasmo y otros con mayor entusiasmo buscamos la forma de eliminarla. Nos ayudamos para conseguirlo con un script y todo correcto hasta que se dan cuenta que se había apresurado y desintalan de nuevo la ventana modal.

Hace unos minutos leo en Vagabundia que Google Buzz hace oficial en relanzamiento de LightBox y nos indica también Vagabundia que ya tenemos la opción de deshabilitarlo desde Configuración | Formato seleccionando NO en al casilla correspondiente y guardando los cambios.

Los que estén usando la nueva interfaz de Blogger Configuración | Entradas y Comentarios o pueden acceder desde http://www.blogger.com/
Esta opción solo afecta a cada blog, si tenemos más de uno es necesario inhabilitar esa opción individualmente.

Más sencillo sería imposible y nadie entiende por qué se lanzaron instalando la ventana modal, algo que en opinión de la gran mayoría no reunía las características necesarias para hacerlo público. Rectificar es de sabios.

Lo anunciaron hace tiempo y estuvimos haciendo comprobaciones para saber como se veía este o aquél otro sitio y ahora ya es oficial, ya están disponibles las plantillas para vistas dinámicas.

¿Y qué es eso? se preguntarán los que recién se estrenan con su blog, las vistas dinámicas son algo más que un cambio de diseño, son una forma distinta de mostrar nuestro blog y como una imagen vale más que mil palabras ahí va ese vídeo proporcionado por Blogger Buzz que dicho sea de paso creo que responde a cualquier pregunta que podemos hacernos.

Cuando las anunciaron recuerdo que no me gustaron nada porque distan mucho de la imagen que tenemos de un blog, encontré las vistas dinámicas carentes de personalidad y de esa esencia íntima y personal que flota en cualquier lugar o sitio que frecuentamos.

Ahora, creo que les descubrí otro sentido, muy indicadas para sitios de fotografía o personas que gustan de escribir y que no necesitan o no desean crear un ambiente amistoso. Cargan rápido y pienso que tendrán gran aceptación los sitios de ventas y descargas.

Para escoger el tipo de vista dinámica podemos situarnos en Plantilla. a continuación veremos algo así:

Con la opción de instalar también tenemos la de personalización con el diseñador de plantillas pero no hay forma de hacerlo con HTML al menos por ahora.

Mis sugerencias son que tengamos cautela y no hagamos ningún cambio sin antes asegurarnos que tenemos copia de nuestra plantilla porque las plantillas dinámicas son como cualquier otra plantilla, una vez instalada anula la anterior, la otra sugerencia es que el diseñador ayuda pero no ofrece todas las alternativas de cambio.

Curiosa la imagen ¿verdad? pero sobre todo fea muy fea, es la imagen que vemos cuando en la configuración de nuestro álbum de Picasa tengamos el acceso restringido, la solución es muy sencilla porque poniendo el álbum público las imágenes  las veremos de nuevo sin necesidad de hacer nada más.

Esta otra tampoco tiene desperdicio y la veremos cuando la imagen o el álbum que la contenía  haya sido eliminado.
La primera le veo sentido porque la imagen sigue existiendo aunque no la veamos pero la segunda sigue conservando la url de la imagen es decir que ni se ve ni existe  pero sigue ocupando un espacio vaya usted a saber donde.
En ayuda de Blogger encontré algunas consultas que tratan sobre este problema y coinciden que  se está acusando más a partir del lanzamiento de Google+ eso hace pensar que se estén eliminando imágenes de forma errónea así que por si acaso fuera eso estuve comprobando...

En Google+ tenemos en configuración la opción de mostrar o no los álbumes de Picasa que como todos sabemos están vinculados a los blogs. Si no queremos mostrar ningún album lo que no debemos hacer es eliminarlo sino ocultarlo a la vista de todos.

Vamos a la pestaña de Editar perfil y en la pestaña Fotos no marcamos nada guardamos los cambios y con eso ya nadie verás nuestros álbumes de fotos.

En Picasa ahora cuando intentamos eliminar un álbum nos muestra un aviso informando que si eliminamos el álbum las imágenes se perderán es un detalle que muchos desconocían como desconocen que todas las fotos que suben a Blogger están en Picasa.

 

¿Cómo eliminamos entonces una imagen desde Google+ ?

Estando logueados marcamos sobre la imagen y buscamos en la parte inferior el desplegable que entre otras opciopnes nos ofrece eliminar la foto. 

DEMO / DESCARGA

La última plantilla de Arianne se llama Blogger Games, es una plantilla indicada para sitios relacionados con juegos y la proporciona con un completo tutorial que nos ayudará a configurar la plantilla a nuestras necesidades. También ofrece la posibilidad de descargar el modelo SIN slide en la sidebar.

Nos lo contaba Henry que los que disponían de la nueva interfaz de Blogger desde ayer ya disponía la plantilla de un enlace para poder acceder en edición de HTML.

Y todos tan contentos, y digo todos porque desde ayer ya ha sido implementado en todos los blogs el nuevo diseño pero ya saben que solo se visualiza si accedemos por Blogger in Draft, algunos nos acostamos con ese saborcito agridulce de lo nuevo y desconocido aunque mirándolo bien esta vez de dulce no tiene nada y de desconocido casi que tampoco porque la nueva interfaz que ha resultado muy al estilo WordPress es diáfana, sencilla, intuitiva y yo diría que bastante incomoda.

Lo de incomoda puede que me lo resulte a mí solamente pero da la casualidad que por donde más me muevo es por la plantilla y 3 enlaces de texto que tenemos para manipular la plantilla y los 3 los añadieron abajo. ¿Por qué Google Blogs? no había otro sitio más lejos?¿qué tal en la sidebar?

Bueno, tampoco es plan de quejarse el primer día, sigo mirando y siempre me ha gustado lo minimalista pero este ya se pasa de diáfano con ese color inmaculado, hasta el título del blog pasa desapercibido, soy una quejica.

Guardo la entrada para seguir más tarde y me doy cuenta que antes nos decía guardado a xxx hora, estaba bien saber que lo que deseábamos guardar ya no se perdería. Ahora simplemente el botón Guardar dice Guardando y listo.

Está guardando ¿pero terminó de guardar? si no dice nada será que está bien y si no lo está tampoco es nada del otro mundo escribo de nuevo la entrada, subo las imágenes, añado enlaces y listo.

Ya no la guardo después de tanto rato le doy salida por si acaso.

Sigo investigando y veo el calendario que hace mención Oloman es para programar las entradas ¡qué buena idea! eso es nuevo, me encanta la mejora con razón están tan "exitados". Que calladito se lo tenían.

Parece que aquellos enlaces que yo daba tanta importancia ellos siguen sin darle ninguna, me refiero a los enlaces para importar, exportar y eliminar. Sigue siendo muy sencillo confundirse y marcar para suprimir el blog, pero no pasa nada porque nos preguntará si estamos seguros de querer eliminarlo.

Un error es pasable pero con dos ya te quedas sin blog y más triste que esos enlaces.

El tema de las ganancias es cosa seria y tan seria que aún está en obras pero no pasa nada se puede acceder desde un enlace que proveen que no es otra cosa que un enlace a la antigua interfaz.

En Blogger in Draft, más información y piropos.

Esta semana que termina ha sido un tanto novedosa debido al nuevo juguete de Blogger.

El gadget para favicon sorprendió a propios y extraños ¿añadir el favicon con un simple click? increíble.

Lo probé como 8 ó 9 veces siempre me lo aceptaba pero seguía viendo el favicon de Blogger, actualizaba la página, intentaba con otro favicon, cerraba el navegador y abría de nuevo. Nada, mi favicon con el nuevo sistema no aparecía pero claro, si solo era accesible por Blogger Draft... eso estaba en fase de pruebas y a lo mejor estaban experimentando.

Durante el resto del día fueron varios los que me hicieron llegar la novedad, unos decían que les funcionaba bien y otros que no !!Ese es mi chico!! ¡¡Ese es mi Blogger!! si funcionara a la primera ¿Dónde estaría la gracia eh?? ¿Dónde?

En Blogger in Draft como es lógico mencionaban el gadget del favicon pero la suerte que tienen estos chicos es increíble porque a ellos siempre les funciona todo perfectamente y como les funciona pues piensan que para todo el mundo es igual de ahí que los 123 comentarios de esa entrada la mayoría es para decir que no consiguen ver el favicon.

El caso que seguí probando y como no, también preguntando. Por fin JMiur da una posibilidad y no crean que lo pensó dos veces antes de explicarlo en ¿Me ves o no me ves? porque según él estaba muy claro. Buen título por cierto porque eso era precisamente lo que estaba ocurriendo limpié la caché limpita, limpita y fue al otro día cuando por fin pude ver el favicon.

No desesperen que hay favicons muy, pero que muy remolones.

Lo del favicon fue sólo un aperitivo comparado con lo que encontraron otros, la nueva interfaz y la imposibilidad de añadir plantillas nuevas como era el caso de Henry que pudo solucionar ayudándose de forma intuitiva y haciendo uso de una copia de respaldo.

Sobre la nueva interfaz poco puedo decir porque sólo la he visto en capturas.

Algunas de las cosas que he leído me alarmaron porque parece ser que no se aprecia la opción de editar HTML, para ese problema  se puede intentar a desmarcar donde se establece blogger en borrador como predeterminado. Pero no es algo comprobado  porque como digo en mi blog de nueva interfaz nada de nada..

Los que ya la están disfrutando y quieren aclarar sus dudas quizás el siguiente enlace de ayuda Blogger pueda orientar,  allí se encuentra friendly colaborador principal y una de sus respuestas a esa carencia de la funcionalidad de editar HTML responde lo siguiente:

"En efecto, hasta ahora no está disponible la funcionalidad "Editar HTML", el código de la plantilla, y tampoco están disponibles las plantillas llamadas de "Diseño" o del 2006, incluso cuando ya muchos lo han reportado como un supuesto bug (improbable a esta altura).
Quedan disponibles las plantillas del 2010, las "clásicas" y el "Diseñador de plantillas", con sus muchísimas limitaciones. La opción de editar las plantillas en algún editor -aplicación de terceros- es una alternativa sólo para muy pocos, la de usar Google Web Toolkit, también (para quienes quieren una app de Google, me refiero). Esperemos que el equipo de Blogger cambie su posición, un aspecto más cool en detrimento de las mejores funcionalidades no me parece una ganancia para los usuarios."

No suelo dar consejos pero esta vez lo voy a dar "Hagan copia de sus plantillas o descarguen el archivo XML" con los cambios podemos cometer algún error y necesitar instalar de nuevo la plantilla, si nos dejan.

La mayoría de los que nos iniciamos con un blog lo hacemos a tientas guiándonos por la intuición y utilizando Google intentando encontrar solución a los problemillas que van surgiendo.

Al principio, escribir una entrada es una tarea complicada porque todo resulta desconocido pero con el tiempo se convierte en algo mecánico, no me refiero al contenido que lleva sus horas en algunos casos sino a utilizar la barra de herramientas, añadir etiquetas, programar y utilizar las opciones a nuestro alcance.

Esta entrada va para los que comienzan, porque siempre hay una primera vez.

Para escribir en nuestro blog accedemos a https://www.blogger.com también podemos acceder por Blogger in Draft personalmente suelo usar la segunda opción la diferencia es que Blogger in Draft es como el laboratorio de pruebas de Blogger, allí podemos probar las futuras mejoras antes de estar disponibles accediendo de forma tradicional.

Ingresamos nuestro mail y contraseña, si dejamos marcado para no cerrar sesión accederemos la próxima vez sin necesidad de ingresar los datos.

Si compartimos el PC lo utilizamos en nuestro trabajo o sitio de estudios es recomendable no marcar esa casilla al menos que no, nos importe que alguien acceda a nuestro blog o nuestra cuenta de correo.

Una vez ingresamos veremos nuestro escritorio, marcaremos sobre la pestaña NUEVA ENTRADA.

Lo siguiente que veremos es nuestro editor, marcaremos la pestaña Edición de HTML para escribir. La opción Redactar solemos usarla para  utilizar los botones de la barra de herramientas.

Una vez escribimos nuestra entrada, añadimos el título y en la parte inferior del formulario tenemos la opción de añadir la etiqueta correspondiente.

Si la etiqueta que vamos a añadir ya existiera marcaremos el enlace Mostrar todo y nos mostrará todas las etiquetas de nuestro blog, un simple click sobre la etiqueta es suficiente para que sea añadida. 

Para añadir una nueva etiqueta simplemente la escribimos y damos salida a nuestra entrada.

Conforme vayamos descubriendo nuestro editor también veremos que tenemos opción de programar entradas "Opciones de entrada"

Recuerda, que utilizar VISTA PREVIA es una buena costumbre que nos evitará más de un sobresalto.

Cuando deseamos que un enlace abra en nueva ventana añadimos el atributo target="_blank 

<a href="url-del-sitio" target="_blank"> ENLACE </a>

En el gadget de lista de enlaces también podemos añadir el atributo target="_blank.

En plantilla edición de HTML marcamos para expandir  y buscamos el título que añadimos a nuestro  gadget en este caso Mis enlaces encontraríamos algo así:

<b:widget id='LinkList1' locked='false' title='Mis enlaces' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

La línea marcada en negrita la sustituimos por la siguiente:

<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>

Guardamos los cambios y  nuestro listado de enlaces abrirá en nueva ventana.

Algunos de los cambios que Blogger anunciaba hace unos días ya está aquí, se trata de las llamadas Vistas dinámicas. La opción de Vistas dinámicas sólo está disponible si nuestro blog es público eso se debe a que trabaja con los feed por eso es necesario que en Configuración/Feed del sitio tengamos marcado en completo.

También en Configuración/Formato debemos tener marcado SI o por el contrario si no deseamos que esa opción esté disponible para las visitas marcaremos NO.

Las visitas que deseen visualizar el blog con alguna de las opciones de Vistas Dinámicas sólo tendrán que añadir al final de la url que aparece en el navegador alguno de los cinco estilos que desea visualizar.

Un ejemplo en este mismo blog:

http://gemablog-.blogspot.com/view/flipcard

http://gemablog-.blogspot.com/view/snapshot

http://gemablog-.blogspot.com/view/timeslide

http://gemablog-.blogspot.com//view/mosaic

http://gemablog-.blogspot.com/view/sidebar

En navegadores antiguos no se visualizarán todos los modelos de Vistas Dinámicas (buen momento para actualizar) así como tampoco se visualizarán algunas características como por ejemplo la publicidad.

En la parte superior derecha veremos un menú desplegable con los cinco estilos de Vista Dinámica, y un buscador que nos mostrará los resultados marcados con distinto color de fondo.

La opción que encuentro más útil es flipcard porque proporciona un menú que nos muestra lo siguiente:
Recent: los últimos post.
Date: las publicaciones de los seis últimos meses.
Label: las etiquetas
Autor: resulta muy curioso, si marcamos sobre alguna de las miniaturas veremos un efecto de transición y visualizamos el post completo al que pertenece esa miniatura incluido los comentarios.

A veces no se trata de "esto veo esto quiero" sino de tomar ideas y aplicarlas a nuestro blog,en definitiva esa es la finalidad cuando compartimos algo.

En este caso no sé a quien agradecer la idea porque la he visto en varias plantillas, por eso el agradecimiento va para BTemplates que es el primer sitio donde vi Archel.

Como se puede apreciar en esa plantilla se ha personalizado el crosscol con una imagen que forma la sombra inferior, la idea es la misma pero aplicada a la cabecera (header)

Para los ejemplos he utilizado la plantilla Minima de Blogger que es la que mejor se presta a ser personalizada, digo esto porque con las nuevas plantillas y las creadas con el diseñador es posible que no encontremos similitud a la hora de buscar algo. Es por eso que siempre digo que si nuestra idea es personalizar la plantilla y más tarde ir aplicando ideas que vamos tomando aquí y allá siempre es mejor utilizar la Minima.

Los estilos para el header o cabecera vienen definidos de esta forma Ver código

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {

color:$pagetitlecolor;

}

#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}

#header img {

margin-$startSide: auto;

margin-$endSide: auto;

}

Cada vez utilizamos mayor resolución de pantalla y es por eso que decidimos ensanchar nuestro blog, en el ejemplo el ancho del header de 660px lo modifiqué a 990px lógicamente si nuestro header mide ese ancho en outer-wrapper tendríamos la misma o superior anchura porque es el bloque contenedor de todo el blog.

Al hacer esto también tendremos más espacio para las entradas main-wrapper y la columna sidebar-wrapper esos 330px que hemos aumentado los podemos distribuir entre main-wrapper y sidebar-wrapper queda a nuestro criterio la forma de distribuirlos.

Es muy probable que no tengamos las mismas medidas en nuestra plantilla y nos preguntemos entonces la forma de añadir esa imagen de sombra respetando las medidas que tenemos.

Tenemos la opción de crear una nueva imagen o modificar la que tenemos y adecuar las medidas a nuestro blog, para eso tendremos en cuenta que la imagen con sombra mide 957 x 22 y debe medir de ancho 33px menos de lo que tenemos en header-wrapper. Es decir que si nuestro blog tiene en header-wrapper 800px nuestra imagen debe medir 767px de ancho y 22px de alto.

¿Complicado? no lo es tanto si vamos paso a paso ¿qué tal si antes lo hacemos en ese blog de pruebas?

Descargamos la imagen y la subimos a Blogger o Picasa,la url de la imagen la utilizaremos después para añadirla en nuestra plantilla.

En edición de HTML y sin expandir plantilla buscamos los estilos mencionados anteriormente para el header y sustituimos sólo los que vemos a continuación que son
#header-wrapper - #header-inner - #header img

#header-wrapper {

background:url(url-imagen-sombra-png) no-repeat center bottom;

width:990px;

height:250px;

padding-bottom:27px;

overflow:hidden;

margin-bottom:30px;

}

#header-inner {

border: 1px solid #000000;

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header img {

height: auto;

width: 960px;

}

Si no vemos el título, recordemos que cuando subimos la imagen del banner con el gadget de cabecera debemos escoger la opción "Detrás del título y la descripción" el resultado sería algo así:

Aún queda un último paso y es conseguir que en Explorer se visualice la sombra ubicada correctamente y JMiur me facilitó la solución para corregir esas diferencias, se trata de condicionar las hojas de estilo y añadir antes de </head>

<!--[if IE]>

<style>

#header-wrapper {

background:url(url-imagen-png) no-repeat center bottom;

width:990px;

height:272px;

padding-bottom:0;

overflow:hidden;

margin-bottom:30px;

}

</style>

<![endif]-->

Y ahora si, con eso es suficiente.

En Blogger las páginas estáticas son post, entradas como las que utilizamos cada día cuando actualizamos con la única diferencia que no se muestran en la página principal ni en los archivos.

En algunas plataformas es posible aplicar estilos distintos para cada página pero en Blogger no es posible, lo que si podemos es aplicar a todas las páginas unos estilos que las diferencien de los post o incluso hacer que en las páginas estáticas no se carguen ciertas partes del blog.

En este ejemplo hemos ocultado la sidebar, los enlaces de navegación, el enlace a entradas ATOM, el título y la fecha que se muestra sobre los post si la tuviéramos. El post-footer (fecha, autor, comentarios, valoración, etiquetas) no es necesario ocultarlo porque no se muestra en las páginas.

Para hacer todo eso vamos a utilizar la condicional de las páginas estáticas:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Es necesario situarse en plantilla edición de HTML y marcar para expandir la plantilla no sin antes asegurarnos que tenemos descargado el archivo de la plantilla o copia.

Condicionamos la sidebar

Añadimos la condicional y su cierre marcado en color rojo:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='xxxxxx' locked='false' title='xxxxxx' type='xxxxxx'>

Aquí tenemos lo añadido a la sidebar

.............

.............

.............

</b:widget>

</b:section>

</div>

</b:if>

Condicionamos los enlaces de navegación y entradas ATOM

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:include name='nextprev'/>

<!-- feed links -->

<b:include name='feedLinks'/>

</b:if>

Condicionamos los títulos:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<h3 class='post-title entry-title'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>

Condicionamos la fecha superior si la tuviéramos:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

</b:if>

</b:if>

Al finalizar comprobamos que en vista previa no da ningún error y guardamos los cambios.

Antes de continuar nos fijamos en la anchura tiene nuestro blog, esa anchura está establecida en outer-wrapper. Copiamos width: 660px o la medida que tenga cada uno en su blog porque será la que añadiremos a las páginas.

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Nos situamos justo antes de </head> y añadimos los nuevos estilos para las páginas estáticas.

main-wrapper es el bloque que acoge en su interior los post, lo que haremos será añadirle la misma anchura que tenemos en outer-wrapper de esa forma las páginas ocuparán todo el ancho del blog.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<style type='text/css'>

#main-wrapper {

width: 660px;

}

</style>

</b:if>

Al código anterior le añadimos también estilos para el contenido de las páginas que en realidad son los post, de esa formar tendrá una imagen de fondo y color y dejaremos espacio (padding) alrededor de el contendido. También le añadimos color, tamaño y tipo  de fuente:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<style type='text/css'>

#main-wrapper {

width: 660px;

}

.post {

background:#B6A78A url(url-imagen) no-repeat scroll center top;

color: #000000;

font-family: Georgia Serif;

font-size: 15px;

margin: 0.5em 0 1.5em;

padding: 40px 40px 0;

}

</style>

</b:if>

Y eso es todo, tenemos para jugar un rato y pasarlo entretenido.

Los usuarios de Blogger con más de seis años en esta plataforma recordarán las movidas con la migración de las plantillas clásicas a Blogger Beta, aún recuerdo que me resistía a la migración porque me encontraba cómoda como estaba y no veía motivo de poner todo patas arriba. La curiosidad pudo con esos nervios iniciales y el cambio fue para mejor.

Paulatinamente nos fueron añadiendo novedades, algunas presentaron problemas poniendo a prueba la paciencia de los usuarios de Blogger.

2010 fue un gran año para Blogger (son palabras de Blogger Buzz) incluyeron el diseñador de plantillas, estadísticas, filtro spam en comentarios, plantillas para móviles , o las maravillosas fuentes de Google. 

Pero eso no es todo porque nos avisan de un emocionante 2011 con nueva interfaz, más limpio y moderno utilizando Google Web Toolkit

Algunos de los cambios que veremos:

Otra nueva función para descubrir contenido interesante y relacionado sobre la los temas que estamos leyendo.

Sólo espero que la sorpresa de mejor resultado que en su día el diseñador de plantillas y las nuevas plantillas que tantos quebraderos de cabeza están dando. Por lo demás sólo que queda armarse de paciencia para cuando llegue el momento.

Evolución de Blogger

REFERENCIA:Vagabundia

Desde hace dos días Blogger está presentando problemas en la plantilla Edición de HTML, dichos problemas impiden expandir la plantilla, utilizar el vista previa y guardar los cambios realizados.

Esta misma tarde parecía que todo estaba en orden pero al parecer ha sido cosa de unos momentos.

En el foro de ayuda Blogger se habla de el tema y derivan a "Problemas conocidos" donde nos informan que ya están investigando y cuando se solucione el problema lo harán saber, aunque imagino que para entonces ya nos habremos dado cuenta.

Así están las cosas, no es problema de vuestro blog, como en otras ocasiones la única pócima mágica es la paciencia.

Cuando deseamos añadir un vídeo de You Tuve en Blogger solemos copiar el código que nos proporcionan y pegarlo en el lugar que deseamos mostrarlo, lo que algunos desconocen es que desde hace un par de meses los podemos añadir desde el mismo editor de entradas simplemente buscando el vídeo sin necesidad de salir del blog.

No olvidaremos que esta opción de insertar vídeos sólo está disponible si  ingresamos al blog desde Blogger in draft porque de lo contrario no visualizamos el icono en la barra de herramientas.

Marcamos sobre el icono para insertar vídeos

Escogemos en las opciones de la izquierda si el vídeo ha sido subido por nosotros "Mis vídeos de You Tube" o "desde You Tube" si el vídeo no se encuentra en nuestra cuenta y a continuación ingresamos en el buscador el título o palabras clave para la localización.

Por defecto el vídeo que será añadido tiene unas medidas de width="320" para el ancho  y height="266" el alto, podemos modificar esas medidas en Edición de HTML para mostrarlo en el tamaño deseado como hicimos en el siguiente ejemplo.

Si alguna vez nos vemos en la situación de invitar a alguien a participar en nuestro blog lo podemos hacer dando poderes de "autor"  accediendo a Configuración/Permisos y en "Añadir autores" se añadirá la cuenta de correo del nuevo autor.

El nuevo autor recibirá una invitación en su bandeja de correo, si accedemos desde el enlace que nos proporciona ese correo encontraremos una especie de formulario donde añadiremos nuestro mail y contraseña.

Una vez realizado este paso el nuevo autor comprobará que en escritorio se ha añadido ese nuevo blog al que fuimos invitados y que aparece en nuestro perfil.

El nuevo autor tendrá permiso para escribir nuevas entradas o editar entradas antiguas sin ningún problema pero no tendrá acceso a la configuración y por lo tanto tampoco a la plantilla.

Un blog puede tener hasta 100 autores que pueden ser también administradores.

Para tener acceso a la plantilla, es necesario ser Administrador. Podemos dar privilegios de Administrador de la misma forma que dimos de autor Configuración/Permisos pero esta vez no será necesario añadir el mail porque ya lo tenemos será suficiente marcando sobre el enlace que dice "Otorgar privilegios de administrador"

Si por cualquier circunstancia en algún momento deseamos eliminar los poderes de autor o admistrador será suficiente con marcar el enlace de "Anular los privilegios de administrador"  automáticamente  el  usuario eliminado pierde  el dominio sobre el blog.

Es por ese motivo que hay que tomar precauciones cuando damos poderes de administrador porque cualquier administrador tiene poder para controlar, hacer y deshacer a su antojo incluso para suprimir al verdadero administrador del blog.